<template>
  <div class="product">
    <div class="product__title">{{ shopName }}</div>
    <div class="product__item" v-for="item in productList" :key="item._id">
      <img class="product__item__img" :src="item.imgUrl" alt="" />
      <div class="product__item__desc">
        <h4 class="product__title">{{ item.name }}</h4>
        <div class="product__price">
          <span class="current__price"
            >￥{{ item.price }} x {{ item.count }}
          </span>
          <span class="current__price__total"
            >￥{{ (item.price * item.count).toFixed(2) }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { useCommonCartEffect } from "../../effect/cartEffects";
import { useRoute } from "vue-router";
export default {
  name: "Products",
  setup() {
    const route = useRoute();
    const shopId = route.params.id;
    const { productList, shopName } = useCommonCartEffect(shopId);
    return { productList, shopName };
  },
};
</script>
<style lang="scss" scoped>
@import "../../style/mixins.scss";
.product {
  box-sizing: border-box;
  margin: 0 0.18rem 0.7rem 0.18rem;
  padding: 0.18rem;
  background-color: #fff;
  &__title {
    font-size: 0.16rem;
    font-weight: 700;
    margin-bottom: 0.18rem;
  }
  &__item {
    display: flex;
    margin-bottom: 0.16rem;
    &__img {
      width: 0.46rem;
      height: 0.46rem;
    }
    &__desc {
      flex: 1;
      margin-left: 0.16rem;
      .product__title {
        margin: 0;
        margin-bottom: 0.08rem;
        line-height: 0.2rem;
        font-size: 0.14rem;
        @include ellipsis;
      }
      .product__price {
        position: relative;
        margin: 0;
        line-height: 0.2rem;
        .current__price {
          font-size: 0.14rem;
          color: #e93b3b;
        }
        .current__price__total {
          position: absolute;
          right: 0;
          font-size: 0.14rem;
          font-weight: 600;
        }
      }
    }
  }
}
</style>
